<template>
  <el-menu class="E-nav-menu" :collapse="isCollapse" :default-active="active" router>
    <el-submenu :index="`${index}`" v-for="(item, index) in navData" :key="index">
      <template slot="title">
        <i :class="`fa ${item.icon}`" />
        <span slot="title">{{item.title}}</span>
      </template>
      <el-menu-item :index="it.path" v-for="(it, i) in item.children" :key="i" :route="it">
        <i :class="`fa ${it.icon}`" />
        {{it.title}}
      </el-menu-item>
    </el-submenu>
  </el-menu>
</template>

<script>
import { mapState } from 'vuex';
import navData from './navData';

export default {
  props: {
    isCollapse: { type: Boolean, default: false }
  },
  computed: {
    ...mapState('user', ['profile'])
  },
  data() {
    return {
      active: this.$route.path,
      navData
    };
  },
  watch: {
    $route(route) {
      let active = route.path;
      if (route.matched.length > 1) {
        // 判断是否多级路由，模糊匹配
        active = route.matched[0].path;
      }
      this.active = active;
    },
    profile(obj) {
      if (!obj) {
        this.navData = navData;
        return;
      }
      this.$api.get('user_playlist', { uid: obj.userId, _: +new Date() }, true).then(({ playlist }) => {
        const create = [];
        const collect = [];
        playlist.forEach((item) => {
          // console.log(item.specialType, item.name);
          if (item.specialType === 5) {
            create.push({ path: `/song-list/${item.id}`, title: item.name, icon: 'fa-heart-o' });
          } else if (item.specialType === 0) {
            create.push({ path: `/song-list/${item.id}`, title: item.name, icon: 'fa-list-ul' });
          } else if (item.specialType === 10) {
            collect.push({ path: `/song-list/${item.id}`, title: item.name, icon: 'fa-list-ul' });
          }
        });
        // el-icon-news
        this.navData = [...navData, {
          title: '创建的歌单',
          icon: 'el-icon-folder-add',
          children: create
        }, {
          title: '收藏的歌单',
          icon: 'el-icon-star-off',
          children: collect
        }];
      });
    }
  }
};
</script>

<style lang="scss">
body {
  & > .el-menu--vertical > .el-menu > .el-menu-item {
    height: 35px;
    line-height: 35px;
    padding: 0 10px !important;
    max-width: 200px;
    /* 文字溢出禁止换行 */
    white-space: nowrap;
    /* 超出部分隐藏 */
    overflow: hidden;
    /* 文字溢出部分点点... */
    text-overflow: ellipsis;
    & > i {
      margin-right: 3px;
      display: inline-block;
      text-align: center;
      width: unset;
      font-size: 16px;
    }
  }
}
.E-nav-menu {
  &.el-menu--collapse {
    border: none;
    width: 50px;
    background: transparent;
    & > .el-submenu {
      & > .el-submenu__title {
        height: 50px;
        padding: 0 !important;
        display: flex;
        justify-content: center;
        align-items: center;
        & > i {
          font-size: 18px;
        }
      }
    }
  }
  &:not(.el-menu--collapse) {
    width: 200px;
    background: transparent;
    $color: #888;
    $color-hover: #555;
    .el-submenu__title {
      height: 35px;
      line-height: 35px;
      padding: 0 10px !important;
      color: $color;
      cursor: default;
      &:hover {
        background: none;
      }
      & > i:not(.el-submenu__icon-arrow) {
        display: none;
      }
    }
    .el-menu.el-menu--inline {
      background: transparent;
      & > .el-menu-item {
        height: 35px;
        line-height: 35px;
        padding: 0 10px !important;
        border-left: 3px solid transparent;
        color: $color;
        /* 文字溢出禁止换行 */
        white-space: nowrap;
        /* 超出部分隐藏 */
        overflow: hidden;
        /* 文字溢出部分点点... */
        text-overflow: ellipsis;
        & > i {
          color: $color;
          margin-right: 3px;
          display: inline-block;
          text-align: center;
          width: unset;
          font-size: 16px;
        }
        &:hover {
          background: none;
          color: $color-hover;
          i {
            color: $color-hover;
          }
        }
        &.is-active {
          color: unset;
          background: rgba(230, 231, 234);
          border-left-color: rgba(198, 47, 47);
          color: $color-hover;
          & > i {
            color: $color-hover;
          }
        }
      }
    }
  }
}
</style>
